<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
  <title>lesson 25</title>
  <style>
    .v-leave-to {
      opacity: 0;
    }
    .v-enter-from {
      opacity: 0;
    }
    .v-enter-active,
    .v-leave-active {
      transition: opacity 1s ease-in;
    }
    .v-leave-from ,
    .v-enter-to {
      opacity: 1;
    }
  </style>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // 多个单元素标签之间的切换
  // 多个单组件之间的切换
  const ComponentA = {
    template: '<div>hello world</div>'
  }

  const ComponentB = {
    template: '<div>bye world</div>'
  }

  const app = Vue.createApp({
    data() {
      return { component: 'component-a' }
    },
    methods: {
      handleClick() {
        if(this.component === 'component-a') {
          this.component = 'component-b';
        }else {
          this.component = 'component-a';
        }
      },
    },
    components: {
      'component-a': ComponentA,
      'component-b': ComponentB,
    },
    template: `
      <div>
        <transition mode="out-in" appear>
          <component :is="component" />
        </transition>
        <button @click="handleClick">切换</button>
      </div>
    `
  });

  const vm = app.mount('#root');
</script>
</html>
